import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Input,Button  } from 'antd'
import { DeleteOutlined } from '@ant-design/icons';
import {actionsJia,actionsJian} from "../../reducers/list/actions"

 class Gl extends Component {
  state={
    name:"",
    age:""
  }
  change=(value,type)=>{
    this.setState({
      [type]:value.target.value
    })
  }
  add=()=>{
    let{actionsJia} = this.props
    let{name,age} = this.state
    actionsJia({
      name,age
    })
  }
  del=(index)=>{
    let{actionsJian} = this.props
    actionsJian(index)
  }
  render() {
    let { list } = this.props
    let { name,age } = this.state
    return (
      <div>
        gl
        <div>
        <Input value={name} onChange={(e)=>{this.change(e,'name')}} placeholder="Basic usage" />
        <Input value={age} onChange={(e)=>{this.change(e,'age')}} placeholder="Basic usage" />
        <Button onClick={this.add} type="primary">add</Button>
        </div>
        <ul>
          {
            list.map((item, index) => {
              return <li key={index}>{item.name} - {item.age}  <Button onClick={()=>{this.del(index)}} type="primary" shape="circle" icon={<DeleteOutlined />} /></li>
            })
          }
        </ul>
      </div>
    )
  }
}


const mapStateToProps = (state) => ({
  list: state.list
})

const mapDispatchToProps = {
  actionsJia,
  actionsJian
}

export default connect(mapStateToProps, mapDispatchToProps)(Gl)